<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="产品条码" prop="productSn">
                <el-input v-model="queryParams.productSn" placeholder="请输入产品条码" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="processingRecordList" @selection-change="handleSelectionChange">
            <el-table-column label="产品条码" align="center" prop="productSn" width="250" />
            <el-table-column fixed="left" label="设备名称" align="center" prop="deviceName" width="250" />
            <el-table-column fixed="left" label="设备工站" align="center" prop="workstation" />
            <!--自定义渲染头-->
            <el-table-column align="center" :key="index" v-for="(column, index) in columns " :prop="column.prop"
                :label="column.label">
                <el-table-column align="center" :key="index" v-for="(child, index) in column.children "
                    :prop="child.prop" :label="child.label" :width="child.width">
                    <template slot-scope="scope">
                        <dict-tag v-if="child.dist" :options="dict.type[child.dist]" :value="scope.row[child.prop]" />
                        <span v-else>{{ scope.row[child.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table-column>

            <!-- <el-table-column label="结束时间" align="center" prop="processingTime" width="180" />
            <el-table-column label="加工时长/秒" align="center" prop="duration" width="100" />
            <el-table-column label="加工结果" align="center" prop="processingResult">
                <template slot-scope="scope">{{ scope.row.processingResult == 1 ? '合格' : '不合格' }}</template>
            </el-table-column> -->

        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import {
    listProcessingRecord,
    getProcessingRecord,
    delProcessingRecord,
    addProcessingRecord,
    updateProcessingRecord
} from "@/api/mes/processing_record";

import { reBuild } from '@/utils/sample.js';

export default {
    name: "ProcessingRecord",
    dicts: ['product_status', 'yes_or_no', 'processing_result'],
    data() {
        return {
            currentStep: 20, // 当前步骤索引，从 0 开始
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            steps: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 加工过程表格数据
            processingRecordList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            paramsLables: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 50,
                productSn: null,
                isSample: 2
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            columns: []
        };
    },
    created() {
        const productSn = this.$route.params.sn
        this.queryParams.productSn = productSn
        this.getList();
    },
    mounted() {

    },
    methods: {
        containsChinese(str) {
            const regex = /[\u4e00-\u9fa5]+/;
            return regex.test(str);
        },
        /** 查询加工过程列表 */
        getList() {
            this.loading = true;
            listProcessingRecord(this.queryParams).then(response => {
                this.reBuildData(response.rows)
                this.processingRecordList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        reBuildData(list) {
            let { columns, rows } = reBuild(list)
            this.columns = columns
            this.processingRecordList = rows;
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                productSn: null,
                processCode: null,
                deviceId: null,
                processingTime: null,
                processingType: null,
                processParameter: null,
                processingResult: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                workstation: null,
                remark: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加加工过程";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getProcessingRecord(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改加工过程";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateProcessingRecord(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addProcessingRecord(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除加工过程编号为"' + ids + '"的数据项？').then(function () {
                return delProcessingRecord(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('mes/processing/record/export', {
                ...this.queryParams
            }, `processingRecord_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>